<!--
 * @Description: 机构管理 - 主页面
 * @Author: DHL
 * @Date: 2022-03-28 14:25:56
 * @LastEditors: DHL
 * @LastEditTime: 2022-11-22 17:43:29
-->
<template>
  <div class="tw-organization-wrapper">
    <splitpanes class="default-theme">
      <pane :size="20" class="organization-left">
        <organizationTree
          ref="orgTreeRef"
          :draggable="true"
          @nodeClick="handleNodeClick"
          @search="handleTreeSearch"
        ></organizationTree>
      </pane>
      <pane :size="80">
        <tw-layout @refresh="handleRefresh" @search="handleSearch" @reset="handleReset">
          <!-- 按钮组 -->
          <template #btns>
            <el-button
              class="item"
              type="danger"
              :loading="loadingByDel"
              v-auth="'ORGANIZATION-RESET-SEARCHKEY'"
              @click="handleResetSearchKey()"
            >
              <svg-icon iconClass="redo"></svg-icon>
              重置SearchKey
            </el-button>

            <el-button
              class="item"
              type="primary"
              v-auth="'ORGANIZATION-ADD'"
              @click="handleOpenForm('add')"
            >
              <svg-icon iconClass="plus"></svg-icon>
              新增
            </el-button>
          </template>

          <!-- 查询表单 -->
          <template #header>
            <el-form ref="searchFormRef" :model="searchForm" label-width="90px">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="机构编码">
                    <el-input
                      v-model="searchForm.code"
                      clearable
                      placeholder="请输入机构编码"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="机构名称">
                    <el-input
                      v-model="searchForm.name"
                      clearable
                      placeholder="请输入机构名称"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="机构类型">
                    <el-select v-model="searchForm.orgType" clearable placeholder="请选择机构类型">
                      <tw-dic dicKey="ORGANIZATION_TYPE"></tw-dic>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>

          <!-- 数据表格 -->
          <tw-table
            ref="tableRef"
            :loading="loading"
            :options="tableOptions"
            :events="tableEvents"
            :data="tableData"
            @search="searchList"
          >
            <!-- 排序号 -->
            <template #orgSeq="{ row }">
              <vxe-input
                v-model="row.orgSeq"
                type="number"
                @blur="handleUpdateById(row)"
                @prevNumber="handleUpdateById(row)"
                @nextNumber="handleUpdateById(row)"
              ></vxe-input>
            </template>

            <template #action="{ row }">
              <el-button
                link
                type="warning"
                v-auth="'ORGANIZATION-EDIT'"
                @click="handleOpenForm('edit', row)"
              >
                编辑
              </el-button>
              <el-button
                link
                type="danger"
                v-auth="'ORGANIZATION-DEL-LOGIC-BATCH'"
                @click="handleDelete(row)"
              >
                删除
              </el-button>
            </template>
          </tw-table>
        </tw-layout>
      </pane>
    </splitpanes>

    <organizationForm ref="formRef" @refreshTableData="handleRefresh"></organizationForm>
  </div>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss">
  .tw-organization-wrapper {
    height: 100%;
    background-color: #ffffff;

    .splitpanes__pane {
      background-color: #ffffff;
    }

    .organization-left {
      height: calc(100% - 20px);
      padding: 10px;
    }
  }
</style>
